import React, { Component } from 'react';
import { Row, DatePicker, Spin, Table, Col, Divider, notification } from 'antd';
import { tableLocale } from '@/tool/components/PageEmpty';
import locale from 'antd/es/date-picker/locale/zh_CN';
import { connect } from 'umi';
import * as echarts from 'echarts';
import 'echarts/extension/dataTool';
import PropTypes from 'prop-types';
import moment from 'moment';
import _ from 'lodash';

import TRButton from '#/components/TRButton';
import { UpSquareOutlined, DownSquareOutlined, UploadOutlined } from '#/utils/antdIcons';
import { HttpCode } from '#/utils/contacts.js';
import emitter from '#/utils/events';
import { TRTooltip, TRDefault } from '@/components/index.js';
import { export_json_to_excel } from '@/utils/fileExport.js';

import { getDataList, getElectricityAnalysis } from '../services';
import {
  electricityPriceOption,
  formatCopper,
  getPoints,
  getDetail,
  COLUMNS,
  TYPECOLOR,
  TYPE,
  typeName,
  averageColor,
  columns,
  _getAveragePrice,
  formatName,
  historyMap,
} from './helper';
import styles from './index.less';

const { RangePicker } = DatePicker;
const dateFormat = 'YYYY-MM-DD';
const dateFormat1 = 'YYYY.MM.DD';
const dataFormats = 'YYYYMMDD';
class ElectricityPriceStatistics extends Component {
  hasTableTimer = null;
  constructor(props) {
    super(props);
    this.state = {
      stationId: '',
      elePriceStart: moment().subtract(7, 'days').format(dateFormat),
      elePriceEnd: moment().subtract(1, 'days').format(dateFormat),
      _elePriceStart: moment().add(1, 'days').format(dateFormat),
      _elePriceEnd: moment().add(3, 'days').format(dateFormat),
      isCharLoading: true,
      expandForm: true,
      priceDataBodyList: [],
      boxList: {},
      forecastUpdateTime: '',
      list: [],
      forecastPriceDateBodyList: [],
      timeline: [],
      boxListSecond: [],
      MedianList: [],
      MedianListSecond: [],
      xAxisList: [],
      wavePriceColor: '',
      averagePriceColor: '',
      averagePriceColorSecond: '',
      wavePriceColorSecond: '',
      rangeOldData: [],
      _rangeOldData: [],
      columnsData: getPoints(),
      stringWidth: `${COLUMNS.length * 80 + 30}px`,
      dataSourceArr: [],
      dataSourceArray: [],
      currentIndex: 0,
      selected: null,
      isEmptyData: true,
      isShowPriceChoose: true,
      message: '暂无数据',
      updateTime: '暂无数据',
    };
    this.tableRef = React.createRef();
  }

  componentDidMount() {
    this._myChart = echarts.init(document.getElementById('echartdemans'));
    this._getPriceDataBodyList();
    this._getPriceDataList();
    this.onWindowResize = this._updatePosition.bind(this);
    this.onMnueChange = this._updatePosition.bind(this);
    this.__eventEmitter__ = (stationId) => {
      clearTimeout(this.hasTableTimer);
      this.hasTableTimer = null;
      this.setState(
        {
          stationId: stationId,
          elePriceStart: moment().subtract(7, 'days').format(dateFormat),
          elePriceEnd: moment().subtract(1, 'days').format(dateFormat),
          dataSourceArray: [],
          currentIndex: 0,
          selected: null,
        },
        () => {
          this._getPriceDataBodyList(stationId);
          this._getPriceDataList(stationId);
        },
      );
    };

    emitter.addListener('onChangeMnue', this.onMnueChange);
    window.addEventListener('resize', this.onWindowResize);
    emitter.addListener('onChangeUnit', this.__eventEmitter__);

    emitter.addListener('onGlobalThemeChange', (e) => {
      setTimeout(() => {
        this.setEchartOption();
      }, 100);
    });
  }
  componentWillUnmount() {
    emitter.removeListener('onGlobalThemeChange', () => {});
    this.__eventEmitter__ && emitter.removeListener('onChangeUnit', this.__eventEmitter__);
    this.setState({
      dataSourceArray: [],
    });
    clearTimeout(this.hasTableTimer);
  }

  _updatePosition() {
    setTimeout(() => {
      this._myChart && this._myChart.resize();
    }, 400);
  }
  // echarts数据填入
  setEchartOption() {
    const { boxList, list, forecastPriceDateBodyList, timeline, xAxisList } = this.state;
    const { options } = electricityPriceOption(
      boxList,
      list,
      forecastPriceDateBodyList,
      timeline,
      xAxisList,
      '单位：元/MWh',
      this._tooltipFormatter.bind(this),
    );
    this._myChart.setOption(options, true);
    this._myChart.on('timelinechanged', this._ontimelinechanged.bind(this));
    this._myChart.on('legendselectchanged', this._onlegendselectchanged.bind(this));
  }

  // 电价统计
  async _getPriceDataBodyList(_stationId) {
    const { elePriceStart, elePriceEnd } = this.state;
    const { formValue } = this.props;
    const { stationId, marketId } = formValue;

    this.setState({ isCharLoading: true });
    let res = await getElectricityAnalysis({
      startDate: moment(elePriceStart).format(dateFormat),
      endDate: moment(elePriceEnd).format(dateFormat),
      stationId: _stationId || stationId,
      marketId,
    });
    if (res && res.statusCode === HttpCode.SUCCESS) {
      const data = res?.electricityAnalysis || res?.data?.electricityAnalysis;
      let _boxList = {};
      let xAxisList = [];
      const priceDataBodyList = [];
      Object.values(data || []).forEach((t, i) => {
        priceDataBodyList.push(...t.priceDataBodyList);
        const list = [];
        t.priceDataBodyList.forEach((j) => {
          list.push(j.list);
          if (!i) {
            const datatime = j?.xAxis.split(':');
            xAxisList.push(`${datatime[0]}${datatime[1]}`);
          }
        });
        if (!list.length) return;
        _boxList[t.curveId] = echarts.dataTool.prepareBoxplotData(list).boxData;
      });
      this._onFistPostion(_boxList, { 历史日前电价: true });

      this.setState(
        {
          isCharLoading: false,
          priceDataBodyList,
          boxList: _boxList,
          xAxisList: xAxisList,
        },
        () => {
          this.setEchartOption();
          this._myChart &&
            this._myChart.dispatchAction({
              type: 'timelineChange',
              // 时间点的 index
              currentIndex: 0,
            });
        },
      );
    } else {
      this.setState({
        isCharLoading: false,
      });
    }
  }

  // 电价预测
  async _getPriceDataList(_stationId) {
    const { _elePriceStart, _elePriceEnd, currentIndex } = this.state;
    const { formValue } = this.props;
    const { stationId, provinceId, marketId } = formValue;
    this.setState({ charLoading: true });
    const param = {
      startDate: moment(_elePriceStart).format(dateFormat),
      endDate: moment(_elePriceEnd).format(dateFormat),
      stationIds: [_stationId ? String(_stationId) : String(stationId)],
      provinceId,
      marketId: marketId,
    };
    if (param.stationIds.length < 1 || !param.stationIds[0]) return;
    const res = await getDataList(param);
    if (res?.statusCode === HttpCode.SUCCESS) {
      const data = res?.data;
      const { clearingPriceData = [], forecastPriceData = {} } = data;

      let timeline = new Set();
      let keys = new Set();
      Object.keys(forecastPriceData).map((item) => {
        timeline.add(formatName(item, 1));
        keys.add(item);
      });

      timeline = [...timeline].sort((a, b) => b - a);
      keys = [...keys].sort((a, b) => b - a);

      if (keys.length) {
        const forecastPriceDateBodyListFormat = keys.map((time) => {
          const temp = forecastPriceData[time] || [];

          temp.push(...clearingPriceData);

          return this.changeDataMap(temp);
        });

        const dataList = forecastPriceDateBodyListFormat[currentIndex];
        this._onFistPostion(dataList);
        this.setState(
          {
            list: dataList,
            forecastPriceDateBodyList: forecastPriceDateBodyListFormat,
            timeline: timeline,
            dataSource: res?.results,
            charLoading: false,
            isEmptyData: false,
            updateTime: res?.updateTime,
          },
          () => {
            this.setEchartOption();
            this._myChart &&
              this._myChart.dispatchAction({
                type: 'timelineChange',
                // 时间点的 index
                currentIndex: 0,
              });
          },
        );
      } else {
        this.setState(
          {
            list: [],
            forecastPriceDateBodyList: [],
            timeline: [],
            charLoading: false,
            isEmptyData: true,
            message: '暂无数据',
          },
          () => {
            this._onFistPostion([]);
            this.setEchartOption();
          },
        );
      }
    } else {
      if (res?.statusCode !== HttpCode.SYS_1004) {
        notification.error({
          message: '接口暂无权限，请联系管理员',
          description: res?.message,
          duration: 2,
        });
      }
      this.setState({
        charLoading: false,
        isEmptyData: true,
        message: '暂无数据',
      });
    }
  }

  isEmpty = (data) => {
    const dataArr = [];
    data.map((item) => {
      Object.entries(item.list).map(([key, value]) => {
        if (_.compact(value).length !== 0) {
          dataArr.push(key);
        }
      });
    });
    return dataArr;
  };

  //将null转化成-
  changeDataMap = (data) => {
    const dataList =
      data &&
      data.map((item) => {
        let list = {};
        Object.entries(item.list).map(([k, v]) => {
          list[k] = v.map((i) => {
            if (i === null || i === 'null') {
              return '-';
            }
            return i;
          });
        });
        return {
          ...item,
          list: { ...list },
        };
      });
    return dataList;
  };

  toggleForm = () => {
    const { expandForm } = this.state;
    if (!expandForm) {
      clearTimeout(this.hasTableTimer);
      this.hasTableTimer = '';
    }
    this.setState({
      expandForm: !expandForm,
    });
  };

  _onCheckDataEmpty(array) {
    if (array.length === 0) {
      return false;
    }
    let arr = array.filter((item) => {
      let i = item.list.filter((jitem) => jitem.value !== null);
      return i.length > 0;
    });
    return arr.length > 0;
  }

  //日期选择框
  _onChangeDatePicker(dates, dateStrings) {
    clearTimeout(this.hasTableTimer);
    this.hasTableTimer = '';
    this.setState(
      {
        elePriceStart: dateStrings[0].replace(/\./g, '-'),
        elePriceEnd: dateStrings[1].replace(/\./g, '-'),
        rangeOldData: [dateStrings[0].replace(/\./g, '-'), dateStrings[1].replace(/\./g, '-')],
        dataSourceArray: [],
        currentIndex: 0,
        selected: null,
      },
      () => {
        this._getPriceDataBodyList();
      },
    );
  }

  onRangePicker = (date, dateStrings) => {
    clearTimeout(this.hasTableTimer);
    this.hasTableTimer = '';
    this.setState(
      {
        _elePriceStart: dateStrings[0].replace(/\./g, '-'),
        _elePriceEnd: dateStrings[1].replace(/\./g, '-'),
        _rangePickerOld: [dateStrings[0].replace(/\./g, '-'), dateStrings[1].replace(/\./g, '-')],
        dataSourceArray: [],
        currentIndex: 0,
        selected: null,
      },
      () => {
        this._getPriceDataList();
      },
    );
  };

  _onFistPostion(params, selObj) {
    if (params instanceof Array && params?.length === 0) {
      return this.__tooltip_ && this.__tooltip_.show('', []);
    }
    if (params?.boxData && params?.boxData.length === 0) {
      this.__tooltip1_ && this.__tooltip1_.show('', []);
      return;
    }

    if (params?.length && params instanceof Array) {
      let lineArray = [];
      params.forEach((item) => {
        const { name, color, averageColor } = TYPECOLOR[item.curveType];
        if (name?.includes('实时电价预测-TJ')) return;
        const list = [];
        const averageList = [];
        const listArr = Object.values(item?.list);
        listArr.map((i) => {
          list.push(
            ...(96 - i?.length > 0
              ? i.concat(Array.from({ length: 96 - i?.length }, (_) => '-'))
              : i),
          );
          averageList.push(..._getAveragePrice(i));
        });
        const obj = {
          name: `${name} | 日均`,
          value: [list[0] || '-', ` | ${averageList[0] || '-'}`],
          color: [color, averageColor],
        };
        lineArray.push(obj);
      });
      if (selObj) {
        let hasArr = [];
        Object.keys(selObj).forEach((item) => {
          if (selObj[item] === true) {
            hasArr.push(`${item} | 日均`);
          }
        });

        lineArray = lineArray.filter((item) => {
          return hasArr.indexOf(item.name) >= 0;
        });
      }
      this.__tooltip_ &&
        this.__tooltip_.show(`${formatName(Object.keys(params[0]?.list)[0], 0)} 0015`, lineArray);
      return;
    }

    if (params && Object.keys(params)?.length) {
      let array = [];
      Object.keys(params).forEach((t) => {
        const { name, color } = historyMap[t];

        //不展示预测类
        if (selObj?.[name] && !name.includes('预测')) {
          const fist = params[t][0];
          array.push(
            ...[
              { name: `${name}最低`, value: formatCopper(fist[0]), color },
              { name: `${name}Q1`, value: formatCopper(fist[1]), color },
              { name: `${name}中位数`, value: formatCopper(fist[2]), color },
              { name: `${name}Q3`, value: formatCopper(fist[3]), color },
              { name: `${name}最高`, value: formatCopper(fist[4]), color },
            ],
          );
        }
      });

      this.__tooltip1_ && this.__tooltip1_.show(array.length ? '历史参考' : '', array);
    }
  }

  _tooltipFormatter(params) {
    let array = [];
    let lineArray = [];
    let timer = '';
    params.forEach((item, index) => {
      if (item?.seriesName?.includes('实时电价预测-TJ')) return;
      timer = item.name;
      if (item.componentSubType === 'boxplot' && !item?.seriesName?.includes('预测')) {
        array.push(
          {
            name: item?.seriesName + '最低',
            value: formatCopper(item.value[1]),
            code: item?.seriesName || '',
            color: item?.color,
          },
          {
            name: item?.seriesName + 'Q1',
            value: formatCopper(item.value[2]),
            code: item?.seriesName || '',
            color: item?.color,
          },
          {
            name: item?.seriesName + '中位数',
            value: formatCopper(item.value[3]),
            code: item?.seriesName || '',
            color: item?.color,
          },
          {
            name: item?.seriesName + 'Q3',
            value: formatCopper(item.value[4]),
            code: item?.seriesName || '',
            color: item?.color,
          },
          {
            name: item?.seriesName + '最高',
            value: formatCopper(item.value[5]),
            code: item?.seriesName || '',
            color: item?.color,
          },
        );
      }
      if (item.componentSubType === 'line' && item.seriesId.split('-')[0] !== '日均') {
        const values = [
          item.value === 0 ? item.value : formatCopper(item.value),
          ` | ${
            params[index + 1]?.value === 0
              ? params[index + 1]?.value
              : formatCopper(params[index + 1]?.value)
          }`,
        ];
        lineArray.push({
          name: `${item?.seriesName} | 日均`,
          value: values,
          code: item?.seriesName || '',
          color: [item?.color, averageColor[item?.color]],
        });
      }
    });
    this.__tooltip_ && this.__tooltip_.show(timer, lineArray);
    this.__tooltip1_ && array.length && this.__tooltip1_.show('历史参考', array);
    return array;
  }

  _onlegendselectchanged(params) {
    const { forecastPriceDateBodyList, currentIndex, boxList } = this.state;
    const { selected } = params;

    this.setState({
      selected: selected,
    });
    this._onFistPostion(boxList, selected);
    this._onFistPostion(forecastPriceDateBodyList[currentIndex], selected);
  }
  _ontimelinechanged(params) {
    const { forecastPriceDateBodyList, selected } = this.state;
    const { currentIndex } = params;
    const timeLineInd = params.currentIndex;
    const forecastUpdateTime = forecastPriceDateBodyList?.[timeLineInd]?.[0]?.updateTime;
    this.setState({
      dataSourceArray: this.getDataSource(currentIndex),
      currentIndex,
      forecastUpdateTime,
    });
    this._onFistPostion(forecastPriceDateBodyList[currentIndex], selected);
  }

  handleOpenChange = async (open) => {
    const { elePriceStart, elePriceEnd } = this.state;
    let rangeDates = open ? [elePriceEnd, elePriceStart] : this.state.rangeOldData;
    this.setState(
      {
        rangeOldData: rangeDates,
      },
      () => {
        if (!open && !this.state.elePriceEnd.length) {
          this.setState({
            elePriceStart: this.state.rangeOldData[0],
            elePriceEnd: this.state.rangeOldData[1],
          });
        }
      },
    );
    if (open) {
      this.setState({
        elePriceStart: '',
        elePriceEnd: '',
      });
    }
  };

  onOpenPicker = (open) => {
    const { _elePriceStart, _elePriceEnd } = this.state;
    let rangeDates = open ? [_elePriceEnd, _elePriceStart] : this.state._rangeOldData;
    this.setState(
      {
        _rangeOldData: rangeDates,
      },
      () => {
        if (!open && !this.state._elePriceEnd.length) {
          this.setState({
            _elePriceStart: this.state._rangeOldData[0],
            _elePriceEnd: this.state._rangeOldData[1],
          });
        }
      },
    );
    if (open) {
      this.setState({
        _elePriceStart: '',
        _elePriceEnd: '',
      });
    }
  };

  hasTable = () => {
    if (this.hasTableTimer) {
      return;
    }
    this.hasTableTimer = setTimeout(() => {
      let containers = Array.from(document.getElementsByClassName('ant-table-container'));
      let bodys = Array.from(document.getElementsByClassName('ant-table-body'));
      if (containers && containers.length > 0 && bodys?.[0]) {
        bodys[0].style.height = ` 350px`;
      }
    }, 10);
  };

  //宽度自适应
  getInnerWidth(len) {
    this.setState({
      stringWidth: `${len * 85 + 50}px`,
    });
  }

  // 处理表格数据
  getDataSource(index) {
    const dataSource = [];
    const {
      boxList,
      list,
      forecastPriceDateBodyList,
      xAxisList,

      timeline,
    } = this.state;
    const { newseries, xAxisData } = electricityPriceOption(
      boxList,
      list,
      forecastPriceDateBodyList,
      timeline,
      xAxisList,
      '单位：元/MWh',
      this._tooltipFormatter.bind(this),
    );
    if (newseries.length) {
      const filterSeries = newseries[index].filter(
        (item) => String(item.id).indexOf('日均') === -1,
      );

      const rowsHead = Object.values(TYPECOLOR).map((t) => t.name);
      const sortList = [];
      filterSeries?.reverse().forEach((item) => {
        if (rowsHead.includes(item.name)) {
          const obj = { type: item.name };
          item?.data.forEach((x, xInx) => {
            obj[xAxisData[xInx]] = Number(x) ? Number(x).toFixed(3) : x;
          });
          dataSource.unshift(obj);
        }
        if (item.type === 'boxplot') {
          const boxData = [];
          Object.keys(TYPE).forEach((i) => {
            boxData[i] = { type: `${item.name}${TYPE[i].name}` };
          });
          item?.data.forEach((x, xInx) => {
            boxData.forEach((y, i) => {
              boxData[i][xAxisData[xInx]] = Number(x[i]) ? Number(x[i]).toFixed(3) : x[i];
            });
          });
          sortList.unshift(...boxData);
        }
      });
      dataSource.push(...sortList);
    } else {
      Object.keys(boxList).forEach((t) => {
        const boxData = [];

        Object.keys(TYPE).forEach((i) => {
          boxData[i] = { type: `${historyMap[t].name}${TYPE[i].name}` };
        });

        boxList[t].forEach((x, xInx) => {
          boxData.forEach((y, i) => {
            boxData[i][xAxisList[xInx]] = Number(x[i]) ? Number(x[i]).toFixed(3) : x[i];
          });
        });
        dataSource.push(...boxData);
      });
    }
    return dataSource;
  }

  toggleDate() {
    this.setState({ isShowPriceChoose: !this.state.isShowPriceChoose });
  }
  // 导出
  _exportInfo() {
    const {
      _elePriceStart,
      _elePriceEnd,
      elePriceStart,
      elePriceEnd,
      dataSourceArray,
      timeline,
      forecastPriceDateBodyList,
    } = this.state;
    const { formValue } = this.props;
    const { stationId, stationName } = formValue;

    const format = 'YYYYMMDD';
    const params = {
      header: [
        `价格预测范围         `,
        `${moment(_elePriceStart).format(format)}-${moment(_elePriceEnd).format(format)}`,
      ],
      data: [],
      filename: `${stationName}-现货价差预测`,
    };
    const elePriceRow = [
      '价格统计范围',
      `${moment(elePriceStart).format(format)}-${moment(elePriceEnd).format(format)}`,
    ];
    const timeRow = [''],
      emqtyRow = [''];
    Object.keys(dataSourceArray?.[0] || {})?.forEach((v) => {
      v !== 'type' && timeRow.push(v);
      params.header.push('');
    });
    const forecastPriceAllRow = [];
    timeline.forEach((v, i) => {
      forecastPriceDateBodyList[i]?.map((beforeForecast) => {
        if ([1].includes(beforeForecast.curveType)) return;
        const forecastPriceRow = [`${v}版-电价预测${TYPECOLOR[beforeForecast.curveType].name}`];
        Object.values(beforeForecast?.list || {})?.forEach((z) => {
          const temp =
            96 - z?.length > 0 ? z.concat(Array.from({ length: 96 - z?.length }, (_) => '-')) : z;
          forecastPriceRow.push(...temp.map((d) => String(d)));
        });
        forecastPriceAllRow.push(forecastPriceRow);
      });
    });
    const dataSourceRest = [];
    dataSourceArray.forEach((v) => {
      if (v.type.indexOf('电价预测') === -1) dataSourceRest.push(Object.values(v));
    });
    params.data = [elePriceRow, emqtyRow, timeRow, ...forecastPriceAllRow, ...dataSourceRest];
    export_json_to_excel(params);
  }

  render() {
    const {
      priceDataBodyList,
      elePriceStart,
      elePriceEnd,
      _elePriceStart,
      _elePriceEnd,
      expandForm,
      isCharLoading,
      charLoading,
      list,
      xAxisList,
      isEmptyData,
      dataSourceArray,
      currentIndex,
    } = this.state;
    const styleHeight = this._onCheckDataEmpty(priceDataBodyList);
    const { buttonPermissions } = this.props;
    return (
      <div className={styles.conten}>
        <Spin spinning={isCharLoading || charLoading}>
          <Row type="flex" align="middle" className={styles.plan_row}>
            <div className={styles.Echart_title}>{this.props.title || '现货价格预测'}</div>
            <div className={styles.header_right}>
              <div>价格预测范围：</div>
              <RangePicker
                separator="-"
                format={dataFormats}
                allowClear={false}
                size={'middle'}
                value={
                  _elePriceStart?.length && _elePriceEnd?.length
                    ? [moment(_elePriceStart, 'YYYY-MM-DD'), moment(_elePriceEnd, 'YYYY-MM-DD')]
                    : []
                }
                onChange={this.onRangePicker.bind(this)}
                onOpenChange={this.onOpenPicker.bind(this)}
                className={styles.rangePicker}
                bordered={false}
              />
              <Divider type="vertical" style={{ margin: '0 12px', color: '#4E5154', height: 12 }} />
              <div>价格统计范围：</div>
              <RangePicker
                onChange={this._onChangeDatePicker.bind(this)}
                value={
                  elePriceStart?.length && elePriceEnd?.length
                    ? [moment(elePriceStart, dateFormat1), moment(elePriceEnd, dateFormat1)]
                    : []
                }
                format={dataFormats}
                separator="-"
                allowClear={false}
                bordered={false}
                size={'small'}
                className={styles.rangePicker}
                locale={locale}
                onOpenChange={this.handleOpenChange.bind(this)}
              />
              <Divider
                type="vertical"
                style={{ margin: '0 12px', color: 'var(--bd-a50)', height: 12 }}
              />
              <div className={styles.savegraies}>
                <TRButton
                  onClick={this._exportInfo.bind(this)}
                  type="link"
                  buttonPermissions={buttonPermissions}
                  menuCode="SpotPriceForecast-export"
                >
                  <UploadOutlined
                    style={
                      buttonPermissions.filter(
                        (item) => item.menuCode === 'SpotPriceForecast-export',
                      ).length > 0
                        ? { fontSize: 14, color: 'var(--bd-primary)', marginRight: 5 }
                        : { fontSize: 14, color: 'rgba(0, 0, 0, 0.25)', marginRight: 5 }
                    }
                  />
                  导出
                </TRButton>
              </div>
              <div>
                <div className={styles.expand} onClick={this.toggleForm}>
                  {expandForm ? (
                    <DownSquareOutlined style={{ fontSize: 14, marginRight: 8 }} />
                  ) : (
                    <UpSquareOutlined style={{ fontSize: 14, marginRight: 8 }} />
                  )}
                  {expandForm ? '展开' : '收起'}
                </div>
              </div>
            </div>
          </Row>
          {!styleHeight && isEmptyData ? (
            <div className={styles.emptychart}>
              <TRDefault type="emptysm" />
            </div>
          ) : (
            ''
          )}
          <Row
            type="flex"
            align="middle"
            className={styles.tooltip}
            style={!styleHeight && isEmptyData ? { height: '0px', overflow: 'hidden' } : {}}
          >
            <TRTooltip
              style={{
                marginLeft: 10,
                opacity: !isEmptyData ? 1 : 0,
                width: '100%',
              }}
              suffixText="单位：元/MWh"
              ref={(e) => (this.__tooltip_ = e)}
              updateTime={this.state.updateTime}
            />
            <TRTooltip
              style={{
                marginLeft: 10,
                opacity: this._onCheckDataEmpty(priceDataBodyList) ? 1 : 0,
                width: '100%',
              }}
              suffixText=""
              ref={(e) => (this.__tooltip1_ = e)}
            />
          </Row>
          {this.state.forecastPriceDateBodyList?.length ? (
            <div className={styles.yuceDate}>
              <span>预测生成时间：</span>
              {this.state.forecastUpdateTime}
            </div>
          ) : (
            ''
          )}
          <div
            className={styles.chart}
            style={!styleHeight && isEmptyData ? { height: '0px', overflow: 'hidden' } : {}}
          >
            <Row>
              <div className={styles.predict}>预测版本</div>
              <Col flex="auto">
                <div id="echartdemans" style={{ width: '100%', height: '300px' }} />
              </Col>
            </Row>
            {
              <Row style={!expandForm ? {} : { display: 'none' }}>
                <Col flex="auto">
                  <div className={styles.tables}>
                    <Table
                      columns={columns(list, xAxisList)}
                      locale={tableLocale}
                      dataSource={list.length ? dataSourceArray : this.getDataSource(currentIndex)}
                      bordered
                      rowKey={'type'}
                      pagination={false}
                      scroll={{ x: 150 }}
                      size={'small'}
                    />
                  </div>
                </Col>
              </Row>
            }
          </div>
        </Spin>
      </div>
    );
  }
}

export default connect(({ global }) => ({ buttonPermissions: global.configure.buttonPermissions }))(
  ElectricityPriceStatistics,
);
